<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>ECharts 入门示例</title>
  <!-- 引入刚刚下载的 ECharts 文件 -->
  <script src="./js/echarts.js"></script>
</head>

<body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    option = {
      //标题
      title: {
        text: '标题'
      },
      //提示框组件
      tooltip: {
        //触发方式
        trigger: 'item',
        //坐标轴指示器配置项
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: 'red'
          }
        }
      },
      //图列组件 当series中存在数据的时候，data可以省略
      legend: {
        // data: ['邮箱', '阿迪达斯', 'Video Ads', 'Direct', 'Search Engine']
      },
      //工具栏
      toolbox: {
        feature: {
          //可下载为图片
          saveAsImage: {},
          //显示详细数据
          dataView: {}
        }
      },
      //直角坐标系内绘图网格
      grid: {
        left: '2%',
        right: '4%',
        bottom: '3%',
        //防止溢出
        containLabel: true
      },
      //直角坐标系grid的x轴
      xAxis: [
        {
          //类目轴
          type: 'category',
          //留白策略
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '邮箱',
          //数据展示类型
          type: 'line',
          stack: 'Total',
          // 区域填充样式
          areaStyle: {
            color: "red"
          },

          emphasis: {
            // 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果
            focus: 'series'
          },
          data: [120, 132, 101, 134, 90, 230, 340]
        },
        {
          name: '阿迪达斯',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          label: {
            show: true,
            position: 'top'
          },
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>

</html>